<template>
  <div  @contextmenu.prevent>
  <router-view :key="routeKey"></router-view></div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
  setup() {
    const route = useRoute();
    // 使用 computed 来生成 key  
    const routeKey = computed(() => {
      // 检查 route.name 是否存在，并且是字符串类型  
      if (route.name && typeof route.name === 'string') {
        return `${route.name}${+new Date()}`;
      }
      // 如果 route.name 不存在或不是字符串，我们可以选择另一种方式生成 key  
      // 这里我们使用 route.path，但你也可以根据需要选择其他属性  
      return `${route.path}${+new Date()}`;
    });
    return {
      routeKey
    };
  },
});
</script>
<style>

/* 懒加载 */
.lazy__img[lazy=loaded] {
  width: 100%;
  border-radius: 6px;
}

.lazy__img[lazy=error] {
  padding: 5em 0;
  width: 100% !important;
}


/* 分页 */
/* 修改未点击时的数字方块背景颜色 */
.el-pagination .el-pager li:not(.active):not(.disabled):hover {
  background-color: #e85623 !important;
}

/* 未点击时的数字方块背景颜色 */

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background-color: #e85623 !important;
  color: #ffffff;
}
/* 悬浮 */
.el-pager li:hover {
  color: #ffffff !important;
}
/* loading */
.el-pagination .btn-prev :hover {
  color: #e85623 !important;
}

.el-pagination .btn-next:hover {
  color: #e85623 !important;
}
/* dialog */
.el-dialog__headerbtn .el-dialog__close,
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
	color: #e85623 !important;
}


/* loading */
.el-loading-spinner .path {
  stroke: #e85623;
}

.el-loading-spinner .el-loading-text {
  color: #e85623;
}

/* loading */
.el-breadcrumb__inner:hover {
  color: #e85623 !important; /* 悬停时的文字颜色 */
}
 
.el-breadcrumb__inner a:hover {
  color: #e85623 !important; /* 悬停时的文字颜色 */
}
.el-checkbox__input.is-checked+.el-checkbox__label{
  color: #e85623 !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: #e85623 !important;
    border-color: #e85623 !important;
}
.el-tabs__item.is-active, .el-tabs__item:hover{
  color: #e85623 !important;
}
.el-tabs__active-bar{
  background-color:#e85623 !important;
}

/* 滚动条整体样式 */
::-webkit-scrollbar {
    width: 2px; /* 滚动条宽度 */
    height: 2px; /* 垂直滚动条高度，如果需要的话 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #c2c0c0; /* 轨道颜色 */
    border-radius: 10px; /* 圆角 */
}
 
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: #e85623; /* 滑块颜色 */
    border-radius: 10px; /* 圆角 */
}
/* 滑块在悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* 悬停时的颜色 */
}


.custom-background-table .el-table__body-wrapper tbody tr td {
  background-color: #1a1a1a; /* 你可以根据需要调整颜色 */
  color: #ffffff !important;
}
 
.custom-background-table .el-table__header-wrapper thead tr th {
  background-color: #1a1a1a; /* 表头背景颜色 */
  color: #ffffff !important;
}

.custom-background-table .el-table__body-wrapper tbody tr:hover td {
  background-color: #1a1a1a !important; /* 覆盖默认悬浮背景色 */
}
 
/* 如果你想要确保表头在悬浮时也不变色（虽然默认情况下表头不会变色），也可以添加以下样式 */
.custom-background-table .el-table__header-wrapper thead tr:hover th {
  background-color: #1a1a1a !important; /* 通常不需要，因为表头默认不悬浮变色 */
}

.lMY5rscV .el-form-item__label {
  color: #ffffff !important; /* 更改为你想要的字体颜色 */
}
</style>